<!-- 角色管理 - 新增/编辑权限 -->
<template>
    <div class="rightCenter">
        <div class="editTop">
            <div class="editTopTitle" @click="cancelClick()">角色管理</div>
            <i class="icon font_family icon-yema-you"></i>
            <div class="editTopTitle">{{editVal}}</div>
        </div>
        <div class="editList">
            <div class="editListName">
                角色名称：
            </div>
            <input class="editListInpBox fontBlue" v-model.trim='titleVal' type="text" placeholder="名称不超过15个字" maxlength="50">
            <span class="warn" v-show='titleShow'>请输入名称</span>
        </div>
        <div class="editList">
            <div class="editListName">
                权限配置：
            </div>
            <ul class="checkUl">
                <li class="checkLi" v-for="(item,index) in dataList" :key='index'>
                    <div class="checkBox" @click='checkClick(index)'>
                        <div :class="{checkBack:!item.show,checkOkBack:item.show}">
                            <div v-show='item.show' class="checkBor"></div>
                        </div>
                        {{item.name}}
                    </div>
                </li>
            </ul>
            <span class="warn" v-show='checkShow'>请完成配置权限</span>
        </div>
        <div class="footButton">
            <div class="addBut" @click='addClick'>
                保 存
            </div>
            <div class="cancelBut" @click='cancelClick'>
                取 消
            </div>
        </div>
    </div>
</template>
<script>
import taskRequest from "../../assets/task";
export default {
  data() {
    return {
      editVal: "添加角色",
      titleVal: "", //标题
      titleShow: false,
      checkShow: false,
      dataList: [
        { name: "业务主管理", check: "provider", show: false },
        { name: "用户管理", check: "user", show: false },
        { name: "订单管理", check: "prod", show: false },
        { name: "活动管理", check: "promotion", show: false },
        { name: "任务管理", check: "task", show: false },
        { name: "积分管理", check: "integral", show: false },
        { name: "奖品管理", check: "award", show: false },
        { name: "权限管理", check: "admin", show: false },
        { name: "群发消息", check: "message", show: false },
        { name: "应用管理", check: "app", show: false }
      ]
    };
  },
  filters: {},
  created: function() {
    let self = this;
    if (sessionStorage.getItem("TABLIST")) {
      let arr = JSON.parse(sessionStorage.getItem("TABLIST"));
      let routShow = false;
      for (let i = 0; i < arr.length; i++) {
        if (arr[i].name == "权限管理") {
          routShow = true;
        }
      }
      if (!routShow) {
        this.$router.push({
          path: "/login"
        });
        sessionStorage.clear();
        self.$message("暂无权限");
        return;
      }
    } else {
      this.$router.push({
        path: "/login"
      });
      sessionStorage.clear();
      self.$message("暂无权限");
       return;
    }
    if (this.$route.query.button == "add") {
      self.editVal = "添加角色";
    } else {
      self.editVal = "编辑角色";
      taskRequest
        .adminRoleInfoFun({
          code: self.$route.query.code
        })
        .then(data => {
          if (data.statusCode == 200) {
            self.titleVal = data.data.name;
            let arr = data.data.resources;
            for (let i = 0; i < self.dataList.length; i++) {
              for (let j = 0; j < arr.length; j++) {
                if (self.dataList[i].check == arr[j]) {
                  self.dataList[i].show = true;
                }
              }
            }
          } else {
            self.$message(data.statusMessage);
          }
        })
        .catch(msg => {
          self.$message("服务器异常");
        });
    }
  },
  watch: {},
  mounted() {},
  methods: {
    //返回
    cancelClick() {
      this.$router.push({
        path: "/home/jurisdiction"
      });
    },
    //权限选择
    checkClick(index) {
      this.dataList[index].show = !this.dataList[index].show;
    },
    //保存
    addClick() {
      let self = this;
      if (self.titleVal == "") {
        self.titleShow = true;
        return;
      } else {
        self.titleShow = false;
      }
      let arr = [];
      for (let i = 0; i < self.dataList.length; i++) {
        if (self.dataList[i].show == true) {
          arr.push(self.dataList[i].check);
        }
      }
      if (arr.length == 0) {
        self.checkShow = true;
        return;
      } else {
        self.checkShow = false;
      }
      let obj = {};
      if (this.$route.query.button == "add") {
        obj = {
          name: self.titleVal,
          resources: arr
        };
      } else {
        obj = {
          code: this.$route.query.code,
          name: self.titleVal,
          resources: arr
        };
      }
      taskRequest
        .adminRoleInsertFun(JSON.stringify(obj))
        .then(data => {
          if (data.statusCode == 200) {
            self.$router.push({
              path: "/home/jurisdiction"
            });
          } else {
            self.$message(data.statusMessage);
          }
        })
        .catch(msg => {
          self.$message("服务器异常");
        });
    }
  }
};
</script>
<style scoped>
.editUpImgHand {
  width: 200px;
  height: 100px;
  text-align: center;
  line-height: 100px;
  background: #f2f5f7;
  color: #b2b7c0;
}

.editUpImgHand i {
  font-size: 20px;
}

.footButton {
  display: flex;
  width: 700px;
  align-items: center;
  margin-top: 124px;
  margin-left: 230px;
}

.addBut {
  width: 150px;
  height: 50px;
  border-radius: 25px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  margin: 0 12px;
  background: #279de2;
  color: white;
}

.cancelBut {
  width: 150px;
  height: 50px;
  border-radius: 25px;
  text-align: center;
  line-height: 50px;
  cursor: pointer;
  margin: 0 12px;
  border: 1px solid #279de2;
  color: #279de2;
}

.checkUl {
  width: 420px;
  min-height: 20px;
  display: flex;
  flex-wrap: wrap;
}

.checkLi {
  width: 140px;
  height: 20px;
  overflow: hidden;
  margin-top: 24px;
}

.checkBox {
  width: 120px;
  height: 20px;
  line-height: 20px;
  color: #2f3a5d;
  font-weight: bold;
  display: flex;
  cursor: pointer;
}

.checkBox > div {
  margin-right: 14px;
}
</style>